<template>
	<view>
		<u-navbar :is-back="true" :title="navbar.title" :background="navbar.background">
			<view class="navbar-right" slot="right" >
				<view class="dot-box right-item">
					<u-icon name="search" size="38"  @click="search.show = true"></u-icon>
				</view>
			</view>	
		</u-navbar>
		<view class="u-page">
			<view class="item" v-for="(item, index) in userList" :key="item.userId">
				<view class="top">
					<view class="name">{{ item.userName }}</view>
					<view class="phone">{{ item.userPhone }}</view>
					<view class="tag">
						<text v-for="(role, index) in item.roles" :key="index" :class="{red:role=='admin'}">{{ role }}</text>
					</view>
				</view>
				<view class="bottom">
					所属部门: {{item.departmentNames}}<br>
					邮箱: {{item.userEmail}}<br>
					身份证: {{item.userIdcard}}
					<u-icon name="edit-pen" :size="40" @click="edit(item)" color="#999999"></u-icon>
				</view>
			</view>
			<u-loadmore @loadmore="loadData" :status="status" :load-text="loadText" />
		</view>	
		<footerBar ></footerBar>
		<u-popup border-radius="10" v-model="search.show"
			 :mode="search.mode" 
			length="70%" :mask="search.mask"
			:closeable="search.closeable"
			:close-icon-pos="search.closeIconPos"
		>
			<view style="">
				
				<u-card margin="70rpx 18rpx" box-shadow="1px 5px 12px 0px;" :title="$t('system.searchCondition')" >
					<view class="" slot="body">
						<u-form  >
							<u-form-item >
								<u-input :placeholder="$t('system.user.userLoginName')" v-model="searchForm.userLoginName" />
							</u-form-item>
							<u-form-item >
								<u-input :placeholder="$t('system.user.userPhone')" v-model="searchForm.userPhone" />
							</u-form-item>
						</u-form>
					</view>
				</u-card>
				<u-row gutter="16" style="    width: 86%;margin: 0 auto;">
					<u-col span="6">
						<u-button size="medium" @click="searchReset">{{$t('system.reset')}}</u-button>
					</u-col>
					<u-col span="6">
						<u-button size="medium" type="error" @click="searchConfirm">{{$t('system.confirm')}}</u-button>
					</u-col>
				</u-row>
				
			</view>
		</u-popup>
	</view>
</template>

<script>
	import request from "utils/request.js"
	export default {
		data() {
			return {
				//搜索表单
				searchForm: {
					userId: "",
					userLoginName: "",
					userPassword: "",
					userName: "",
					userPhone: "",
					userEmail: "",
					userIdcard: "",
					pageNo: 1,
					pageSize: 10
				},
				// 搜索相关信息
				search:{
					show: false,
					closeable: true,
					mode: "right",
					closeIconPos: 'top-right',
					flowname: this.$t('system.flowname'),
					title: this.$t('system.title'),
				},
				
				page: {
					pageSizes: [10, 20, 50, 100],
					pageSize: 10,
					total: 0,
					currentPage: 0
				},
				userList: [],
				status:"loadmore",
				loadText: {
					loadmore: this.$t('system.loadBefore'),
					loading: this.$t('system.loadBefore'),
					nomore: this.$t('system.nomore'),
				},
				navbar:{
					title: this.$t('system.user.userInfo'),
					background: {
						backgroundColor: '#001f3f',
						backgroundImage: 'linear-gradient(45deg, rgb(28, 187, 180), rgb(141, 198, 63))'
					}
				}
			};
		},
		onLoad() {
			this.getList();
		},
		methods: {
			loadData(){
				this.getList();
			},
			//查询列表
			getList() {
				let _this = this;
				this.searchForm['pageNo'] = this.page.currentPage + 1
				this.searchForm['pageSize'] = this.page.pageSize
				request({
					url: '/system/user/queryByPage',
					method: 'post',
					data: this.searchForm
				}).then(response => {
					if(_this.page.currentPage + 1 == response.data.pageNum){
						_this.userList = [..._this.userList,...response.data.list]
					}
					_this.page.total = response.data.total
					_this.page.currentPage = response.data.pageNum
				})
			},
			// 编辑或新增信息
			edit(user){
				this.$u.route({
					url: "/pages/system/user/user-edit?userInfo=" + JSON.stringify(user)
				})
			}
		}
	};
</script>

<style lang="scss" scoped>
.item {
	padding: 40rpx 20rpx;
	.top {
		display: flex;
		font-weight: bold;
		font-size: 34rpx;
		.phone {
			margin-left: 60rpx;
		}
		.tag {
			display: flex;
			font-weight: normal;
			align-items: center;
			text {
				display: block;
				width: 60rpx;
				height: 34rpx;
				line-height: 34rpx;
				color: #ffffff;
				font-size: 20rpx;
				border-radius: 6rpx;
				text-align: center;
				margin-left: 30rpx;
				background-color:rgb(49, 145, 253);
			}
			.red{
				background-color:red
			}
		}
	}
	.bottom {
		display: flex;
		margin-top: 20rpx;
		font-size: 28rpx;
		justify-content: space-between;
		color: #999999;
	}
}
.addSite {
	display: flex;
	justify-content: space-around;
	width: 600rpx;
	line-height: 100rpx;
	position: absolute;
	bottom: 30rpx;
	left: 80rpx;
	background-color: red;
	border-radius: 60rpx;
	font-size: 30rpx;
	.add{
		display: flex;
		align-items: center;
		color: #ffffff;
		.icon{
			margin-right: 10rpx;
		}
	}
}
</style>
